<template>
  <div style="margin-left: 3%;margin-right: 3%">
    <my-head></my-head>
    <template>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item ,index) in items" :key="index">
          <el-image
            style="width:100%; height: 100%"
            :src="item.url"
           ></el-image>
        </el-carousel-item>
      </el-carousel>

      <div class="m-course-system" id="j-course-system" data-log-id="courseSystem" data-log-act="expose" data-log-data="{&quot;sceneLog&quot;:&quot;课程体系&quot;, &quot;columnIndex&quot;: 1}"><div class="uc-course-system">
        <div class="uc-course-system_hd" style="margin-right: 85%">
          <h2 class="title f-ib">系统化学习路线</h2>
        </div>
        <el-divider></el-divider>
        <div class="uc-course-system_wrap f-cb">
          <!--Regular list-->
          <a href="" target="_blank" class="f-fl f-ib uc-course-system_item" data-log-act="0" data-log-exp="" data-log-data="{&quot;logType&quot;:&quot;button&quot;,&quot;itemName&quot;:&quot;职场通用技能&quot;,&quot;itemUrl&quot;:&quot;https://study.163.com/topics/school-of-career&quot;}">
            <img alt="职场通用技能" src="//edu-image.nosdn.127.net/b8cbbde8bc98409aad5227fde070df7d.png?imageView&amp;quality=100">
          </a>

          <a href="" target="_blank" class="f-fl f-ib uc-course-system_item" data-log-act="1" data-log-exp="" data-log-data="{&quot;logType&quot;:&quot;button&quot;,&quot;itemName&quot;:&quot;编程与开发&quot;,&quot;itemUrl&quot;:&quot;https://study.163.com/topics/school-of-programming-and-development&quot;}">
            <img alt="编程与开发" src="//edu-image.nosdn.127.net/9c3adc02cea44377a91c6716201bbe4c.png?imageView&amp;quality=100">
          </a>

          <a href="" target="_blank" class="f-fl f-ib uc-course-system_item" data-log-act="2" data-log-exp="" data-log-data="{&quot;logType&quot;:&quot;button&quot;,&quot;itemName&quot;:&quot;AI与数据&quot;,&quot;itemUrl&quot;:&quot;https://study.163.com/topics/school-of-artificial-intelligence-and-data-science&quot;}">
            <img alt="AI与数据" src="//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&amp;quality=100">
          </a>

          <a href="" target="_blank" class="f-fl f-ib uc-course-system_item" data-log-act="3" data-log-exp="" data-log-data="{&quot;logType&quot;:&quot;button&quot;,&quot;itemName&quot;:&quot;产品与运营&quot;,&quot;itemUrl&quot;:&quot;https://study.163.com/topics/school-of-product-design-and-operation&quot;}">
            <img alt="产品与运营" src="//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&amp;quality=100">
          </a>

          <a href="" target="_blank" class="f-fl f-ib uc-course-system_item" data-log-act="4" data-log-exp="" data-log-data="{&quot;logType&quot;:&quot;button&quot;,&quot;itemName&quot;:&quot;设计创意&quot;,&quot;itemUrl&quot;:&quot;https://study.163.com/topics/school-of-design&quot;}">
            <img alt="设计创意" src="//edu-image.nosdn.127.net/96ee5f4a9b954c1991b17ca577aaa00a.png?imageView&amp;quality=100">
          </a>

          <a href="" target="_blank" class="f-fl f-ib uc-course-system_item" data-log-act="5" data-log-exp="" data-log-data="{&quot;logType&quot;:&quot;button&quot;,&quot;itemName&quot;:&quot;电商运营&quot;,&quot;itemUrl&quot;:&quot;https://study.163.com/topics/school-of-e-commerce&quot;}">
            <img alt="电商运营" src="//edu-image.nosdn.127.net/9957cb6a888e40f08c36ce6a96804d32.png?imageView&amp;quality=100">
          </a>

        </div>
      </div>
      </div>
      <div class="menue_index" style="margin-top: 40px;margin-left: 5%">

        <div class="uc-course-system_hd" style="margin-right: 90%">
          <h2 class="title f-ib">课程分类</h2>
        </div>
        <el-divider></el-divider>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#303133">
        <el-menu-item index="1" class="course_sys">JAVAEE+分布式</el-menu-item>
        <el-menu-item index="2" class="course_sys">
          python全栈+人工智能
        </el-menu-item>
        <el-menu-item index="3" class="course_sys">HTML5大前端</el-menu-item>
        <el-menu-item index="4" class="course_sys">大数据+人工智能</el-menu-item>
        <el-menu-item index="5" class="course_sys">云计算</el-menu-item>
        <el-menu-item index="6" class="course_sys">Unity游戏开发</el-menu-item>
        <el-menu-item index="7" class="course_sys">Go语言开发</el-menu-item>
        <el-menu-item index="8" class="course_sys">全栈软件测试</el-menu-item>
      </el-menu>



      <div class="line"></div>
      </div>
      <div style="margin-left: 0%">
        <el-row>
          <el-col :span="5" v-for="(o, index) in course" :key="index" :offset="index > 0 ? 1 : 1">
            <el-card :body-style="{ padding: '5px' }">
              <img style="width: 280px;height: 150px" :src="o.coursePic" class="image">
              <div  style="padding: 30px;">
                <span>{{o.courseName}}</span>
                <div class="bottom clearfix">
                  <time  class="time">{{ o.courseDescription | ellipsis}}</time>
                  <el-button type="text" @click="coursedetail(o.id)" class="button">点击查看</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div><br/><br/>

      <!--分页插件-->
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page=params2.page
        :page-sizes="[2, 4, 6, 8]"
        :page-size=params2.size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total2>
      </el-pagination><br/>

      <div style="margin-top: 40px;margin-left: 5%">
        <img src="@/static/images/xiaoguanggao.jpg"></img>
      </div>
      <div style="margin-top: 40px;margin-left: 5%">


        <div class="uc-course-system_hd" style="margin-right: 90%">
          <h2 class="title f-ib">名师介绍</h2>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 0%">
          <el-row>
            <el-col :span="5" v-for="(o, index) in teacher" :key="index" :offset="index > 2 ? 1 : 1">
              <el-card :body-style="{ padding: '5px' }">
                <img :src="o.teachImage" class="image">
                <div style="padding: 30px;">
                  <span>{{o.teachName}}</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ o.teachDescription | ellipsis }}</time>
                    <el-button type="text" class="button">点击查看</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div><br/><br/>

      <!--分页插件-->
      <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page=params1.page
        :page-sizes="[2, 4, 6, 8]"
        :page-size=params1.size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total1>
      </el-pagination><br/><br/>

    </template>


    <my-footer></my-footer>
  </div>
</template>
<script>

  import axios from 'axios';

  export default {

    data() {
      return {
          items:[],
        course:[],
        teacher:[],
        activeIndex: '1',
        activeIndex2: '1',
        currentDate: new Date(),
        key:1,
        params1:{
          page:1,
          size:2
        },
        total1:10,
        params2:{
          page:1,
          size:2
        },
        total2:10,
      }
    },
    methods:{
      //查询轮播图
      rotation_chart:function () {
        this.$axios.post("/portal/findRotation").then(res=>{

          if (res.data.code==0){
            this.items =  res.data.data;
          }
        })

      },
      //根据分类查询所有课程
      handleSelect(key,keyPath) {
        if(key!=null){
          this.key = key;
          /*分类变化时,需要重置分页*/
          this.params2.page=1;
          this.params2.size=2;
          this.total2=10;
        }
        this.$axios.get("/qfCourse/findCourseByClassify/"+this.key+"/"+this.params2.page+"/"+this.params2.size ).then(res=>{
          if (res.data.code==0){
              console.log(res.data.data)
              this.course=res.data.data;
              this.total2=res.data.total;
            }
        })
      },
      handleSizeChange2(val) {
        this.params2.size=val;
        this.handleSelect();
      },
      handleCurrentChange2(val) {
        this.params2.page=val;
        this.handleSelect();
      },
      //查询所有的讲师
      findTeacher:function () {
        this.$axios.get("/qfTeach/findAll?page="+this.params1.page+"&size="+this.params1.size).then(res=>{
          if (res.data.code==0){
            this.teacher=res.data.data;
            this.total1=res.data.total;
          }
        })
      },
      handleSizeChange1(val) {
        this.params1.size=val;
        this.findTeacher();
      },
      handleCurrentChange1(val) {
        this.params1.page=val;
        this.findTeacher();
      },
      //coursedetail 跳转到课程详细页面
      coursedetail:function (id) {
        this.$router.push("/course/"+id);
      }
    },
    mounted(){
      this.rotation_chart();
      this.handleSelect(this.key);
      this.findTeacher();
    },
    //字数控制在30字内
    filters: {
      ellipsis(value) {
        if (!value) return "";
        if (value.length > 30) {
          return value.slice(0, 30) + "...";
        }
        return value;
      }
    }

  }
</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .uc-course-system {
    width: 1205px;
    margin: 0 auto 40px auto;
    overflow: hidden;
  }
  .uc-course-system_hd {
    margin-bottom: 16px;
  }
  .uc-course-system_wrap {
    margin-right: -25px;
  }
  .uc-course-system_wrap .uc-course-system_item {
    width: 180px;
    height: 120px;
    margin-right: 25px;
    border-radius: 3px;
    overflow: hidden;
  }
  .f-ib {
    display: inline-block;
    zoom: 1;
    *display: inline;
  }
  .f-fl {
    float: left;
  }
  .uc-course-system_wrap .uc-course-system_item img {
    width: 100%;
    height: 100%;
  }
  .menue_index {
    margin: 0;
  }
  .course_sys{
    font-size: 17px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
